<template>
  <div class="liveMessage">
    <div class="title">
      {{liveData.menuName}} /
      <span>{{livesObj.nodeName}}</span>
    </div>
    <div class="returnPrevious" @click="returnToPrevious">
      <a-icon type="left" />返回
    </div>
    <div class="content">
      <div class="view">
        <video class="demo-video" id="vVideo" width="100%" height="100%" controls />
      </div>
      <!-- <div class="channel">
        <a-tabs default-active-key="1" :tabBarGutter="30" type="line" tab-position="right">
          <a-tab-pane key="1" tab="信号源1"></a-tab-pane>
          <a-tab-pane key="2" tab="信号源2"></a-tab-pane>
          <a-tab-pane key="3" tab="信号源3"></a-tab-pane>
        </a-tabs>
      </div>-->
      <div class="comment">
        <div class="top">
          <span>评论</span>
        </div>
        <div class="center" @scroll="scrollEvent">
          <div class="content" v-for="(item,index) in msgList" :key="index">
            <div class="left">
              <img src="../../../../images/home/doctor.png" alt />
            </div>
            <div class="right">
              <div class="name">
                <div>
                  <span style="color:#ff993f;margin:5px">{{item.userName}} :</span>
                  <span id="text">{{item.comment}}</span>
                </div>
              </div>
              <div class="date">
                <span>{{item.commentDate}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <a-input class="desc" v-model="form.desc" type="textarea" @keydown.native="Keydown" />
          <a-button class="but" type="primary" @click="websocketsend">发送</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";
import flvjs from "flv.js";
import moment from "moment";
import api from "../../../api/live/live.js";
export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      nodeName:'',
      form: {
        desc: ""
      },
      userInfo: {},
      imgUrl: "",
      Timer: null, //定时器
      msgList: [],
      websocketIp: "",
      emitData: {
        type: 0,
        liveId: "",
        name: "",
        msg: ""
      },
      timer: null,
      pageSize: 10,
      liveData:[],
      livesObj:{}
    };
  },
  created() {
    this.imgUrl = this.$config.imgUrl;
    this.websocketIp = this.$config.websocketIp;
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    this.initWebSocket();
    this.getReplayCommentList(this.pageSize);
    this.liveData = JSON.parse(sessionStorage.getItem('liveData'));
    console.log(111,this.$parent.$parent.$parent)
  },
  mounted() {
    let _this = this;
    let liveIp = _this.$config.liveIp;
    let livePort = _this.$config.livePort;
    let liveId = this.$router.currentRoute.query.id;
    this.emitData.liveId = this.$router.currentRoute.query.id;
    this.nodeName = this.$router.currentRoute.query.nodeName;
      api.getOnlineList().then(res=>{
        if(res.code == 200) {
          res.data.data.forEach(element => {
            if(element.id == liveId) {
              _this.livesObj = element
              if(_this.livesObj.isOpen == 1) {
                if (flvjs.isSupported()) {
                  var videoElement = document.getElementById("vVideo");
                  var flvPlayer = flvjs.createPlayer({
                    type: "flv",
                    isLive: true,
                    url: `${liveIp}live?port=${livePort}&app=live&stream=${liveId}`
                  });
                  flvPlayer.attachMediaElement(videoElement);
                  flvPlayer.load();
                  flvPlayer.play();
                }
              }
            }
          });
        }
      })

    this.timer = setInterval(() => {
      setTimeout(this.getReplayCommentList(this.pageSize), 0);
    }, 1500);
  },
  beforeDestroy() {
    let _this = this;
    //_this.player.destory();
    clearInterval(this.timer);
    this.timer = null;
  },

  destroyed() {
    this.websock.close(); //离开路由之后断开websocket连接
  },

  methods: {
    returnToPrevious() {
      this.$router.go(-1); //返回上一层
    },
    getReplayCommentList(pageSize) {
      let _this = this;
      let liveId = this.$router.currentRoute.query.id;
      api
        .replayCommentGetList(null, { nodeId: liveId, pageSize: pageSize })
        .then(res => {
          if (res.code == 200) {
            _this.msgList = res.data.data;
          }
        });
    },

    initWebSocket() {
      //初始化weosocket
      //const wsuri = "ws://192.168.31.65:8881";
      this.websock = new WebSocket(this.websocketIp);
      this.websock.onopen = this.websocketonopen;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
      let actions = this.emitData;
      this.websock.send(JSON.stringify(actions));
    },
    websocketonerror() {
      //连接建立失败重连
      this.initWebSocket();
    },
    // websocketonmessage(e){ //数据接收
    // console.log(e);
    //   let redata = JSON.parse(e.data);
    //   console.log(redata)
    //   this.msgList.push(redata)
    // },

    Keydown(e) {
      if (!e.shiftKey && e.keyCode == 13) {
         e.cancelBubble = true; //ie阻止冒泡行为
        e.stopPropagation();//Firefox阻止冒泡行为
        e.preventDefault(); //取消事件的默认动作*换行
        //以下处理发送消息代码
        // onSendMsg();
        this.websocketsend()
      }
    },
    websocketsend() {
      if(this.form.desc == '') {
        this.$message.warning('请输入');
      }else {
        //数据发送
        let liveId = this.$router.currentRoute.query.id;
        let actions = {};
        actions.type = 1;
        actions.liveId = liveId;
        actions.name = this.userInfo.userName;
        actions.msg = this.form.desc;
        console.log(JSON.stringify(actions));
        this.websock.send(JSON.stringify(actions));
        this.form.desc = ''
        this.getReplayCommentList();
      }
    },
    websocketclose(e) {
      //关闭
      console.log("断开连接", e);
    },
    // 评论滚动条到底部触发
    scrollEvent(e) {
      let _this = this;
      if (
        e.srcElement.scrollTop + e.srcElement.clientHeight ==
        e.srcElement.scrollHeight
      ) {
        _this.pageSize = Number(_this.pageSize) + Number(10);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.liveMessage {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  .title {
    font-size: 18px;
    color: #4d4d4d;
    line-height: 50px;
    margin-left: 30px;
    span {
      color: #1e7eff;
      cursor: pointer;
    }
  }
  .returnPrevious {
    color: #0078b6;
    width: 60px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    cursor: pointer;
    position: absolute;
    z-index: 100;
    right: 50px;
    top: 90px;
  }
  .returnPrevious:hover {
    color: #3fbfff;
  }
  .content {
    width: 1560px;
    height: 90%;
    margin-left: 30px;
    display: flex;
    justify-content: space-between;
    .view {
      width: 1110px;
      height: 100%;
      background: #fff;
      border-radius: 8px;
      .demo-video {
        //object-fit: cover;
        object-fit: fill;
      }
    }
    .channel {
      width: 160px;
      height: 100%;
    }
    .comment {
      width: 440px;
      height: 100%;
      background: #fff;
      border: 1px #ddd solid;
      border-radius: 8px;
      .top {
        width: 100%;
        height: 7%;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ddd;
        span {
          margin-left: 10px;
          font-size: 16px;
          font-weight: bold;
          display: flex;
          align-items: center;
        }
      }
      .center {
        width: 440px;
        height: 78%;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        .content {
          width: 95%;
          height: 70px;
          margin: 0 auto;
          display: flex;
          align-items: center;
          border-bottom: 1px #ddd dashed;
          .left {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            img {
              width: 45px;
              height: 45px;
              border-radius: 50%;
            }
          }
          .right {
            width: 400px;
            height: 70px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            position: relative;
            .name {
              div {
                word-break: break-all;
                width: 100%;
                height: 100%;
              }
            }
            .date {
              position: absolute;
              font-size: 6px;
              right: 0;
              bottom: 0;
              color: rgb(134, 134, 134);
            }
          }
        }
      }
      .bottom {
        width: 100%;
        height: 15%;
        border-top: 1px solid #ddd;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        .desc {
          width: 100%;
          height: 70%;
          border: none;
        }
        .but {
          width: 15%;
          height: 30%;
          border-radius: 20px;
          background: #0078b5;
        }
      }
    }
  }
}
</style>

<style>
.liveMessage .ant-tabs .ant-tabs-right-bar {
  float: none !important;
  margin-left: 0 !important;
  border-left: 0 !important;
}
.liveMessage .ant-tabs-tab {
  width: 160px !important;
  height: 50px !important;
  background: #ebebeb !important;
  line-height: 50px !important;
  font-size: 18px !important;
  color: #4d4d4d !important;
}
.liveMessage .ant-tabs-nav .ant-tabs-tab {
  padding: 0 !important;
}
.liveMessage .ant-tabs-nav .ant-tabs-tab-active {
  background-color: rgba(210, 228, 238, 0.75) !important;
  border-left: 6px solid #0078b6 !important;
  font-size: 18px !important;
  font-weight: bold !important;
  color: #0078b6 !important;
}
.liveMessage .ant-tabs .ant-tabs-right-bar .ant-tabs-ink-bar {
  display: none !important;
}
</style>